<template>

  <div class="filter-container">
    <el-row>
      <el-col span="3">
        <el-form-item label="仓库名">
          <el-input  placeholder="请输入仓库名" v-model="state.pagination.name"  clearable />
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="管理人姓名">
          <el-input  placeholder="请输入管理人姓名" v-model="state.pagination.manager" clearable />
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="类型">
          <el-select  placeholder="请选择仓库类型" v-model="state.pagination.type" clearable>
            <el-option label="" value="" />
            <el-option label="大型仓库" value="大型仓库" />
            <el-option label="中型仓库" value="中型仓库" />
            <el-option label="小型仓库" value="小型仓库" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-button @click="load" >查询</el-button>
        <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
      </el-col>
    </el-row>

  </div>

  <el-table :data="state.dataList"  style="width: 100%" >
    <el-table-column label="ID" align="center" prop="id"></el-table-column>
    <el-table-column label="仓库名" align="center" prop="name"></el-table-column>
    <el-table-column label="类型" align="center" prop="type"></el-table-column>
    <el-table-column label="地址" align="center" prop="address"></el-table-column>
    <el-table-column label="租金" align="center" prop="rent" ></el-table-column>
    <el-table-column label="起租时间" align="center" prop="leaseTime" width="150"></el-table-column>
    <el-table-column label="到期时间" align="center" prop="expirationTime" width="150"></el-table-column>
    <el-table-column label="管理人" align="center" prop="manager"></el-table-column>
    <el-table-column label="管理人电话" align="center" prop="phone" width="150"></el-table-column>
    <el-table-column label="操作" align="center" fixed="right" width="180" >
      <template v-slot="{row}">
        <el-button link type="primary" size="small" @click="handleEdit(row)">修改</el-button>
        <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>

      </template>
    </el-table-column>
  </el-table>
  <div class="pagination-container">

    <el-pagination
        class="pagiantion"

        @current-change="handleCurrentChange"

        @size-change="handleSizeChange"

        :current-page="state.pagination.currentPage"

        :page-size="state.pagination.pageSize"

        :page-sizes="[1, 2, 3]"

        layout="total, sizes, prev, pager, next, jumper"

        :total="state.pagination.total">

    </el-pagination>
  </div>


  <!--  新增仓库弹窗-->
  <el-dialog
      v-model="state.dialogFormVisible"
      title="新增仓库"
      width="30%"
  >
    <template #footer>
        <span class="dialog-footer">
          <div class="filter-container">
            <el-form :model="state.formData" label-position="top" :rules="rules" ref="ruleFormRef">
    <el-row>
        <el-col span="3">
        <el-form-item label="仓库名称" prop="name">
          <el-input  placeholder="请输入仓库名"  v-model="state.formData.name"  clearable />
<!--          <span class="error" v-if="errorInfo.name">{{ errorInfo.name }}</span>-->
        </el-form-item>
      </el-col>
        <el-col span="3">
        <el-form-item label="类型" prop="type">
          <el-select  placeholder="请选择仓库类型"  v-model="state.formData.type" clearable >
            <el-option label="大型仓库" value="大型仓库" />
            <el-option label="中型仓库" value="中型仓库" />
            <el-option label="小型仓库" value="小型仓库" />
          </el-select>
<!--          <span class="error" v-if="errorInfo.type">{{ errorInfo.type }}</span>-->
        </el-form-item>
      </el-col>

      <el-col span="3">
        <el-form-item label="地址" prop="address">
          <el-input  placeholder="请输入仓库地址"  v-model="state.formData.address" clearable />
<!--          <span class="error" v-if="errorInfo.address">{{ errorInfo.address }}</span>-->
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="租金" prop="rent">
          <el-input  placeholder="请输入租金"  v-model="state.formData.rent"  clearable />
<!--          <span class="error" v-if="errorInfo.rent">{{ errorInfo.rent }}</span>-->
        </el-form-item>
      </el-col>
        <el-col span="3">
        <el-form-item label="起租时间" prop="leaseTime">
          <el-input  placeholder="请输入起租时间"  v-model="state.formData.leaseTime" clearable />
<!--          <span class="error" v-if="errorInfo.leaseTime">{{ errorInfo.leaseTime }}</span>-->
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="到期时间" prop="expirationTime">
          <el-input  placeholder="请输入到期时间"  v-model="state.formData.expirationTime"  clearable />
<!--          <span class="error" v-if="errorInfo.expirationTime">{{ errorInfo.expirationTime }}</span>-->
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="管理人" prop="manager">
          <el-input  placeholder="请输入管理人名字"  v-model="state.formData.manager"  clearable />
<!--          <span class="error" v-if="errorInfo.manager">{{ errorInfo.manager }}</span>-->
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="管理人电话" prop="phone">
          <el-input  placeholder="请输入管理人电话"  v-model="state.formData.phone" clearable  />
<!--          <span class="error" v-if="errorInfo.phone">{{ errorInfo.phone }}</span>-->
        </el-form-item>
      </el-col>
    </el-row>
              </el-form>
  </div>

          <el-button @click="state.dialogFormVisible = false">取消</el-button>
          <el-button type="primary"  @click="handleAdd(ruleFormRef)">
            确定
          </el-button>
        </span>
    </template>
  </el-dialog>

  <!--修改仓库弹窗-->
  <el-dialog
      v-model="state.dialogFormVisible4Edit"
      title="修改仓库"
      width="30%"
  >
    <template #footer>
        <span class="dialog-footer">
          <div class="filter-container">
            <el-form v-model="state.formData">

    <el-row>
        <el-col span="3">
        <el-form-item label="仓库名称" prop="name">
          <el-input  placeholder="请输入仓库名" v-model="state.formData.name"  clearable />
        </el-form-item>
      </el-col>
        <el-col span="3">
        <el-form-item label="类型" prop="type">
          <el-select  placeholder="请选择仓库类型" v-model="state.formData.type" >
            <el-option label="大型仓库" value="大型仓库" />
            <el-option label="中型仓库" value="中型仓库" />
            <el-option label="小型仓库" value="小型仓库" />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col span="3">
        <el-form-item label="地址" prop="address">
          <el-input  placeholder="请输入仓库地址" v-model="state.formData.address" clearable />
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="租金" prop="rent">
          <el-input  placeholder="请输入租金" v-model="state.formData.rent"  clearable />
        </el-form-item>
      </el-col>
        <el-col span="3">
        <el-form-item label="起租时间" prop="leaseTime">
          <el-input  placeholder="请输入起租时间" v-model="state.formData.leaseTime" clearable />
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="到期时间" prop="expirationTime">
          <el-input  placeholder="请输入到期时间" v-model="state.formData.expirationTime"  clearable />
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="管理人" prop="manager">
          <el-input  placeholder="请输入管理人名字" v-model="state.formData.manager"  clearable />
        </el-form-item>
      </el-col>
      <el-col span="3">
        <el-form-item label="管理人电话" prop="phone">
          <el-input  placeholder="请输入管理人电话" v-model="state.formData.phone"  clearable />
        </el-form-item>
      </el-col>
    </el-row>

            </el-form>
  </div>

          <el-button @click="state.dialogFormVisible4Edit = false">取消</el-button>
          <el-button type="primary" @click="handleUpdate()">
            确定
          </el-button>
        </span>
    </template>
  </el-dialog>



</template>

<script setup>
import {computed, reactive, ref, watch} from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import instance from "../../../request";


const state=reactive({
  dataList: [],//表格数据
  options:[],
  selectedOptions: [],
  formData: {
    name: "",
    type: "",
    address: "",
    rent: "",
    leaseTime: "",
    expirationTime:"",
    manager: "",
    phone: ""
  },
  dialogFormVisible: false,//添加表单是否可见
  dialogFormVisible4Edit:false,//编辑表单是否可见
  pagination: {//分页相关模型数据
    currentPage: 1,//当前页码
    pageSize:3,//每页显示的记录数
    total:0,//总记录数
    name: "",
    type: "",
    manager: ""
  }
})

const ruleFormRef=ref(null);

const rules = reactive({
  name: [
      {required: true,message:"请输入仓库名",trigger: "blur"},
  ],
  type: [
    {required: true,message:"请选择仓库类型",trigger: "change"},
  ],
  address: [
    {required: true,message:"请输入地址",trigger: "blur"},
  ],
  rent: [
    {required: true,message:"请输入租金",trigger: "blur"},
  ],
  leaseTime: [
    {required: true,message:"请输入起租时间",trigger: "blur"},
  ],
  expirationTime:[
    {required: true,message:"请输入到期时间",trigger: "blur"},
  ],
  manager: [
    {required: true,message:"请输入管理人名字",trigger: "blur"},
  ],
  phone: [
    {required: true,message:"请输入管理人电话",trigger: "blur"},
    {pattern:/^1\d{10}$/,message: "请输入正确的手机号",trigger: "blur"}
  ]
})


//多选选择器

// const findAll=()=>{
//   let param = "?name=";
//   param+= "&manager=";
//   param+= "&type=";
//   console.log("-----------------"+ param);
//   instance.get("/depository/"+state.pagination.currentPage+"/"+state.pagination.pageSize+param).then((res)=>{
//     state.pagination.total = res.data.total;
//     state.pagination.currentPage = res.data.current;
//     state.pagination.pagesize = res.data.size;
//     state.dataList=res.data.records;
//   })
// }

const load=()=>{
  // instance.get('/depository').then(res=>{
  //   console.log(res.data)
  //   state.dataList=res.data
  // })
  let param = "?name="+state.pagination.name;
  param+= "&manager="+state.pagination.manager;
  param+= "&type="+state.pagination.type;
  console.log("-----------------"+ param);
  instance.get("/depository/"+state.pagination.currentPage+"/"+state.pagination.pageSize+param).then((res)=>{
    state.pagination.total = res.data.total;
    state.pagination.currentPage = res.data.current;
    state.pagination.pagesize = res.data.size;
    state.dataList=res.data.records;
  })
}
const   handleCreate=()=> {
  state.dialogFormVisible = true;
  resetForm();
}

const resetForm=()=> {
  state.formData={};
}
const cancel=()=>{
  this.dialogFormVisible = false;
  this.dialogFormVisible4Edit = false;
  // this.$message.info("操作取消");
}


//添加
const handleAdd= async (formEl)=> {
  // await ruleForms.value?.validate().catch(err =>{ElMessage.error("表单校验失败");throw err})
  await formEl.validate((valid, fields) => {
    if(valid){
      instance.get("/depository/findPhone/"+state.formData.phone).then((res)=>{
        if (res.data){
          instance.post("/depository/",state.formData).then((res)=>{
//如果操作成功，关闭弹层，显示数据
            if(res.flag){
              state.dialogFormVisible = false;
              ElMessage({
                type: 'success',
                message: '添加成功',
              })
            }else {
              ElMessage({
                type: 'error',
                message: '添加失败',
              })
            }
          }).finally(()=>{
            load()
          });
        }else {
          ElMessage({
            type: 'error',
            message: '电话已重复，请换一个',
          })
        }
      })

    }else {
      ElMessage({
        type: 'error',
        message: '信息未完全填入，请补充完整',
      })
    }
  })

}

const  handleEdit=(row)=> {
  console.log(row.id)
  instance.get("/depository/"+row.id).then(res=>{
    if(res.flag){
//展示弹层，加载数据
      state.formData=res.data
      state.dialogFormVisible4Edit = true;
    }else{
      console.log("失败")
    }
  })
}

const handleUpdate=()=>{
  console.log(state.formData);
  instance.put("/depository/",state.formData).then(res=>{
    if(res.flag){
      console.log("修改成功")
      state.dialogFormVisible4Edit = false;
    }else{
      console.log("失败");
    }
  }).finally(()=>{
    load()
  })





}




const handleDelete=(row)=> {
  instance.get("/depository/existGoods/"+row.id).then((res)=>{
    console.log(res.data)
    if (res.data){
      ElMessageBox.confirm(
          '是否删除改仓库?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            instance.delete("/depository/"+row.id).then((res)=>{
              if(res.flag){
                ElMessage({
                  type: 'success',
                  message: '删除成功',
                })
              }else{
                ElMessage({
                  type: 'error',
                  message: '删除失败',
                })
              }
            }).finally(()=>{
              load()
            });
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '已取消删除',
            })
          })
    }else {
      ElMessage({
        type: 'error',
        message: '仓库有货物，禁止删除',
      })
    }
  })

}
const handleCurrentChange=(currentPage)=>{
  state.pagination.currentPage=currentPage;
  load();
}
const handleSizeChange=(pageSize)=>{
  state.pagination.pageSize=pageSize;
  load();
}
// //错误信息
// const errorInfo = reactive({
//   name: "仓库名不能为空",
//   type: "仓库类型不能为空",
//   address: "仓库地址不能为空",
//   rent: "租金不能为空",
//   leaseTime: "起租时间不能为空",
//   expirationTime:"到期时间不能为空",
//   manager: "管理名不能为空",
//   phone: "电话不能为空"
// });
// const disabled = computed(() => {
//   return !Object.keys(errorInfo).every(key => !errorInfo[key]);
// });
//
// function checkLengthAndEmpty(value, propertyName,name) {
//   if (!value) {
//     errorInfo[propertyName] = `${name}不能为空`;
//   }  else {
//     errorInfo[propertyName] = "";
//   }
// }
//
// watch(state.formData, () => {
//   checkLengthAndEmpty(state.formData.name, "name", "仓库名");
//   checkLengthAndEmpty(state.formData.type, "type", "仓库类型");
//   checkLengthAndEmpty(state.formData.address, "address", "仓库地址");
//   checkLengthAndEmpty(state.formData.rent, "rent", "租金");
//   checkLengthAndEmpty(state.formData.leaseTime, "leaseTime", "起租时间");
//   checkLengthAndEmpty(state.formData.expirationTime, "expirationTime", "到期时间");
//   checkLengthAndEmpty(state.formData.manager, "manager", "管理名");
//
//   const reg = /^1[3456789]\d{9}$/;
//   if (!state.formData.phone) {
//     errorInfo.phone = "电话不能为空";
//   } else if (!reg.test(state.formData.phone)) {
//     errorInfo.phone = "请输入正确的电话号码";
//   } else {
//     errorInfo.phone = "";
//   }
// },{ immediate: true })

load();






</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
}

.filter-container .el-form-item {
  margin-right: 10px;
}

.filter-container .butT {
  margin-left: 10px;
}
.error{
  color: #f00;
  font-size: 12px;
}
</style>